<script setup>
import { defineProps, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import useNightModeStore from "@/stores/nightModeStore";

const nightModeStore = useNightModeStore();
const props = defineProps({
    storyid: {
        type: Number,
        default: 0
    },
    extra: {
        type: Object,
        default: () => {
            return {
                comments: 0,
                popularity: 0
            }
        }
    }
});

const showShareFailedToast = ref(false);
const router = useRouter();
const goback = () => router.back();
const seeComment = () => {
    router.push(`/comments/${props.storyid}`);
}

const hasLiked = ref(false);
const hasCollected = ref(false);
const showCollectToast = ref(false);
const likeCount = computed(() => props.extra.popularity + (hasLiked.value ? 1 : 0));
const likeCountClass = computed(() => hasLiked.value ? 'liked' : '');

const like = () => {
    hasLiked.value = !hasLiked.value;
};

const collect = () => {
    hasCollected.value = !hasCollected.value;
    showCollectToast.value = true;
    setTimeout(() => {
        showCollectToast.value = false;
    }, 2000);
};

</script>

<template>
    <div :class="['bar', nightModeStore.isNight ? 'night' : '']">
        <i class="back" @click="goback"></i>
        <i @click="seeComment" class="comment"><span>{{ props.extra.comments }}</span></i>
        <i :class="['up', { 'liked': hasLiked }]" @click="like">
            <span :class="likeCountClass">{{ likeCount }}</span>
        </i>
        <i :class="['collect', { 'collected': hasCollected }]" @click="collect">
            <span v-if="hasCollected"></span>
            <span v-else></span>
        </i>
        
        <i class="forward"></i>
    </div>
    <div class="box"></div>

    <div>
        <Toast to="body">
            <div v-if="showCollectToast" class="collect-toast">
                <span>{{ hasCollected ? '收藏成功' : '取消收藏' }}</span>
            </div>
        </Toast>

        
    </div>
</template>
<style scoped>
.box {
    height: 50px;
}

.bar {
    display: flex;
    justify-content: space-evenly;
}

.bar i {
    width: 50px;
    height: 50px;
    background: url(../assets/fanhui.png) center center no-repeat;
    background-size: 20px 20px;
    font-style: normal;
    position: relative;
}

.bar i.back {
    background-image: url(../assets/fanhui.png);
}

.bar i.comment {
    background-image: url(../assets/pinglun.png);
}

.bar i.up {
    background: url(../assets/dianzan.png) center center no-repeat;
    background-size: 25px 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.bar i.up.liked {
    background-image: url(../assets/dianzan2.png);
}

.bar i.up:not(.liked) .like {
    background-image: url(../assets/dianzan.png);
}

.bar i.collect {
    background-image: url(../assets/shoucang.png);
    background-size: 30px 30px;
}

.bar i.forward {
    background-image: url(../assets/zhuanfa.png);
}

.bar i>span {
    position: absolute;
    top: 10px;
    left: 37px;
    font-size: 12px;
}

.bar i>span.liked {
    color: red;
}

.bar.night {
    background-color: #555;
    color: #fff;
}

.list.night .left {
    color: #fff;
}

.list .left {
    color: #000;
}

.bar i.collect {
    background-image: url(../assets/shoucang.png);
    background-size: 30px 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.bar i.collect.collected {
    background-image: url(../assets/shoucang2.png);
}

.bar i.collect>span {
    margin-left: 5px;
}

.collect-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    z-index: 9999;
}
.share-failed-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    z-index: 9999;
}
</style>